mui.init({
    pullRefresh : {
        container:".mui-scroll-wrapper",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
            down : {
                style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
                callback: function (){ //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
                
                    //注意，加载完新数据后，必须执行如下代码，注意：若为ajax请求，则需将如下代码放置在处理完ajax响应数据之后
                    //没有更多内容了，endPulldown 传入true， 不再执行下拉刷新
                    // 补充说明  新版本下拉上拉更新啦
                    // this --> var that = this
                    // this --> bind(this)
                    // render()
                    setTimeout(function() {
                        // 下拉刷新效果隐藏
                        this.endPulldownToRefresh()
                    }.bind(this), 1000)
                }
            },
            up: {
                callback: function () {
                    // 上拉效果隐藏
                    setTimeout(function() {
                        // 下拉刷新效果隐藏
                        //可传参数，如果传的是true表明没有更多数据
                        this.endPullupToRefresh()
                    }.bind(this), 1000)
                }
            }
    }
});



     //初始化渲染
    var render = function(){
        //获取关键字
        var key = lt.getUrlParams().key || '';
        $('.search_input').val(key);
        getproductlist({
            proName:key,
            page:1,
            pageSize:10
        },function(data){
            // console.log(data);
            $('.lt_product').html(template('product',data));
        });
    }
    

var getproductlist = function(pramas,callback){
    $.ajax({
        type:'get',
        url:'/product/queryProduct',
        data:pramas,
        dataType:'json',
        success:function(data){
            setTimeout(function(){
                callback && callback(data)
            },1000)
            
        }
    })
}
 
render();


//点击搜索，进行相关数据的渲染
$('.search_btn').on('tap',function(){
    var val = $.trim($('.search_input').val());
    //如果输入为空，进行提醒
    if(!val){
        mui.toast('请输入关键字');
        return false;
    } 
    //对搜索液晶性加载的模拟
    $('.lt_product').html('<div class="loading"><span class="mui-icon mui-spinner"></span></div>');
    getproductlist({
        proName:val,
        page:1,
        pageSize:10
    },function(data){
        // console.log(data);
        if(data.data.length == 0)mui.toast('没有相关数据');
        $('.lt_product').html(template('product',data));
    });
})

// 排序功能的实现
$('[data-type]').on('tap',function(){
    if($(this).hasClass('now')){
        if($(this).find('span').hasClass('fa-angle-down')){
            $(this).find('span').addClass('fa-angle-up').removeClass('fa-angle-down')
        }else{
            $(this).find('span').addClass('fa-angle-down').removeClass('fa-angle-up')
        }
    }else{
        $(this).addClass('now').siblings().removeClass('now').find('span').removeClass('fa-angle-up').addClass('fa-angle-down');
    }

    var type = $('[data-type].now').data('type')
    var value = $('[data-type].now').find('span').hasClass('fa-angle-up') ? 1 : 2;
    var obj = {};
    obj[type] = value;
    var val = $.trim($('.search_input').val());
    //如果输入为空，进行提醒
    if(!val){
        mui.toast('请输入关键字');
        return false;
    } 
    $('.lt_product').html('<div class="loading"><span class="mui-icon mui-spinner"></span></div>');
    getproductlist($.extend({
        proName:val,
        page:1,
        pageSize:10,
    },obj),function(data){
        // console.log(data);
        $('.lt_product').html(template('product',data));
    });
})


